<template>
    <div class="internalControlStaging-div" id="calendar-box">
        <div class="internalControlStaging-div-top">
            <div class="internalControlStaging-div-topLfet" :style="{width: zzrypjlBmVal.length?'40%':'100%'}">
                <div v-for="(item,index) in menus" :key="index" class="toDoTasks-annual-for" @click="addApplication(item,index)">
                    <div class="at-y-icon" :class="'at-y-bg'+index">
                        <ych-icon v-if="item.icon && item.icon.indexOf('spcy-icon') == -1" :type="item.icon" />
                        <span v-else :class="'iconfont '+item.icon"></span>
                    </div>
                    <span class="at-y-title">{{ item.title }}</span>
                </div>
            </div>
            <div v-if="zzrypjlBmVal.length" class="internalControlStaging-div-topRight" :key="internalControlStagingTopRightKey">
                <!-- <div class="internalControlStaging-daiban-title">
                    <h3 class="title">待办事项</h3>
                </div>
                <div style="height: 200px;overflow-y: scroll;">
                    <div v-for="(item,index) in dbList" :key="index" style="border-bottom: 1px solid #e4e3e3;display: flex;align-items: center;">
                        <div style="width: 70px;min-width: 70px !important;text-align: center;">
                            <span style="font-weight: 600;">{{ item.flcmc }}</span>
                        </div>
                        <div style="padding-left: 5px;border-left: 1px solid #e4e3e3;">
                            <span style="font-weight: 400;">{{ item.fsqr }} {{ item.fsqsj }}</span><br/>
                            <span style="font-size: 12px;color: rgb(176, 176, 176);font-weight: 400;">{{ item.fzy }}</span>
                        </div>
                    </div>
                    <div v-if="dbList.length <= 0" style="padding-left: 10px;">
                        <span>暂无数据</span>
                    </div>
                </div> -->
                <div>
                    <div>
                        <a-radio-group :default-value="zzrypjlBmVal" button-style="solid">
                            <a-radio-button v-for="(item,index) in zzrypjlBmList" :key="index" :value="item" @click="zzrypjlBmChange(item,index)">
                                {{item}}
                            </a-radio-button>
                        </a-radio-group>
                    </div>
                    <div style="background: #ECECEC; padding: 10px">
                        <h3 style="font-weight: 600;font-size: 18px;text-align: center;" >部门职员派检率</h3>
                        <a-row :gutter="16">
                            <a-col v-for="(item,index) in zzrypjlData.list" :key="index" :span="4">
                                <a-card class="internalControl-staging-card">
                                    <a-statistic
                                        :title="item.yearMonth"
                                        :value="item.data"
                                        :precision="2"
                                        :suffix="item.dataDw"
                                        :value-style="{ color: '#3f8600' }"
                                        style="margin-right: 10px"
                                    >
                                        <!-- <template #prefix>
                                            <a-icon type="arrow-up" />
                                        </template> -->
                                    </a-statistic>
                                </a-card>
                            </a-col>
                        </a-row>
                    </div>
                </div>
            </div>
        </div>
        <div class="internalControlStaging-div-bottom">
            <!-- <div style="text-align: right;padding-right: 20px;">
                <a-button class="blue-btn" @click="switchHandle" icon="swap">切换部门数据</a-button>
            </div> -->
            <!-- <div ref="chart" style="height: 100%;" :style="{width:calendarWidth+'px',}"></div> -->
            <!-- <div ref="chartBM" style="height: 100%;" :style="{width:calendarWidth+'px',}"></div> -->
            <toDoListModal :occupancyHeight="calendarHeight"></toDoListModal>
        </div>
        <addModal v-show="false" ref="addModalRefRef" />
        <selectIncrease ref="selectIncreaseRef" />
    </div>
</template>
<script>
import {NkDbList,xtsjSearch,getZzrypjl} from './service/index'
import addModal from '../../modal/handleModal'
import selectIncrease from './selectIncrease'
import toDoListModal from '../../daiBan/index'
export default {
    components: {
        addModal,
        selectIncrease,
        toDoListModal
    },
    data() {
        return {
            menus: [
                {
                    title: '一般报销',
                    icon: 'account-book',
                    addStr:'一般报销',
                },{
                    title: '差旅报销',
                    icon: 'credit-card',
                    addStr:'新增报销',
                },
                // {
                //     title: '费用报销申请',
                //     icon: 'account-book',
                //     addStr:'新增报销',
                // },
                {
                    title: '合同审核单',
                    icon: 'logout',
                    addStr:'合同',
                },
                {
                    title: '预算调配申请',
                    icon: 'credit-card',
                    addStr:'财务预算',
                }
            ],
            dbList: [],
            xData: [],
            yDataUsed: [],
            yDataResidue: [],
            calendarWidth: window.innerWidth - 240,
            calendarHeight:(window.innerHeight - 600),
            zzrypjlData: {},
            zzrypjlBmList: [],
            zzrypjlBmVal: '',
            internalControlStagingTopRightKey: '',
        }
    },
    mounted() {
        // this.getXtsj()
        this.getNkDbList()
        this.getZzrypjlData()
        window.addEventListener('resize', () => {
            this.calendarWidth = document.getElementById('calendar-box').offsetWidth
            myChart.resize();
        });
    },
    methods: {
        getData(){
            this.$nextTick(() => {
                var myChart = this.$echarts.init(this.$refs.chart)
                let data1 = this.yDataUsed;
                let data2 = this.yDataResidue;
                var data3 = function() {
                    var datas = [];
                    for (var i = 0; i < data1.length; i++) {
                        datas.push(0);
                    }
                    return datas;
                }();
                let options = {
                    title: {
                        text: '台账拆分指标',
                        left: 'center',
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            // Use axis to trigger tooltip
                            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                        },
                        // 解决数据为0时所有数据齐平的问题
                        formatter:function(params){
                            let html = params[0].name
                            params.forEach((item,index)=>{
                                html+=(`<br/>${item.marker+item.seriesName}: ${item.value==undefined ? 0 : item.value}`)
                            })
                            return html;
                        },
                    },
                    legend: {
                        left: 'right',
                        right: '5%',
                    },
                    grid: {
                        left: '7%',// 将画布向右移动
                        right: '2%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: this.xData,
                        axisLabel: { interval: 0, rotate: 30 },
                    },
                    yAxis: {
                        // type: 'value',
                        min:1,
                        type: 'log', // 解决数值差距太大导致页面不美观的问题
                        logBase: 1000,
                    },
                    series: [
                        {
                            name: '未用',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: false
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: data2
                        },
                        {
                            name: '已用',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: false
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: data1
                        },
                        // {
                        //     name: '综合',
                        //     type: 'bar',
                        //     stack: 'total',
                        //     label: {
                        //         show: true,
                        //         position: 'top',
                        //         formatter: function (p) { //这里处理展示的数据和
                        //         let sum = data1[p.dataIndex] + data2[p.dataIndex];
                        //         //console.log('处理展示的数据和:',p,data1[p.dataIndex],data2[p.dataIndex],sum)
                        //         return sum;
                        //         }
                        //     },
                        //     emphasis: {
                        //         focus: 'series'
                        //     },
                        //     data: [0, 0, 0, 0, 0]//为了隐藏总计bar
                        // }
                    ]
                };
                myChart.setOption(options)
                window.addEventListener("resize",()=> {
                    this.calendarWidth = document.getElementById('calendar-box').offsetWidth
                    myChart.resize();
                })
                // 按钮点击事件
                myChart.on('click', {seriesType: 'titleBtn'}, function (params) {
                    if (params.componentType === 'title') {
                        //console.log('标题按钮被点击');
                        // 在这里添加按钮点击后的逻辑
                    }
                });
            })
        },
        getNkDbList(){
            NkDbList().then(res => {
                this.dbList = res.result.records
            })
        },
        getZzrypjlData(){
            getZzrypjl().then(res => {
                this.zzrypjlData = {}
                if(res.success && res.result.length){
                    this.zzrypjlAllData = res.result
                    this.zzrypjlData = res.result[0]
                    res.result.forEach(async(item,index) => {
                        if(index == 0){
                            this.zzrypjlBmVal = item.deptName
                        }
                        this.zzrypjlBmList.push(item.deptName)
                    })
                } else {
                    this.zzrypjlData = {}
                }
                this.internalControlStagingTopRightKey = Date.now()
            })
        },
        zzrypjlBmChange(item,index){
            //console.log(item)
            // this.zzrypjlBmVal = item
            this.zzrypjlData = {}
            this.zzrypjlData = this.zzrypjlAllData[index]
        },
        getXtsj(){
            xtsjSearch().then(res =>{
                if(res.success){
                    let data = res.result.records
                    this.xData = data.fysxmmc
                    this.yDataUsed = data.fyzfje.map(Number)
                    this.yDataResidue = data.fzbjy.map(Number)
                    this.getData()
                }
            })
        },
        addApplication(row,index){
            // if(index == 0){
            //     this.$refs.selectIncreaseRef.visible = true
            //     return
            // }
            this.$refs.addModalRefRef.addClick(row.addStr)
        },
        switchHandle(){}
    },
}
</script>
<style lang="less">
    .internalControlStaging-div {
        display: flex;
        justify-content: center;
        flex-direction: column;
        width: 100%;
        height: 100%;
        // flex-direction属性决定主轴的方向（即项目的排列方向）
        // row（默认值）：主轴为水平方向，起点在左端。
        // row-reverse：主轴为水平方向，起点在右端。
        // column：主轴为垂直方向，起点在上沿。
        // column-reverse：主轴为垂直方向，起点在下沿。
        .internalControlStaging-div-top {
            flex: 1;
            height: 50%;
            display: flex;
            flex-direction: row;
            .internalControlStaging-div-topLfet {
                // flex: 1;
                width: 40%;
                display: flex;
                flex-direction: row;
                align-items: center;
                text-align: center;
                justify-content: space-evenly;
                border: 1px solid #e4e3e3;
                border-radius: 5px;
                margin: 6px;
                margin-right: 0px;
                .toDoTasks-annual-for{
                    .at-y-icon{
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 80px;
                        height: 80px;
                        background: #e4d329;
                        border-radius: 50%;
                        font-size: 30px;
                        color: #fff;
                        .iconfont{
                            font-size: 30px;
                        }
                    }
                    .at-y-title{
                        font-size: 16px;
                    }
                    .at-y-bg1{
                        background: #5077ee;
                    }
                    .at-y-bg2{
                        background: #50ccee;
                    }
                    .at-y-bg3{
                        background: #9c50ee;
                    }
                    .at-y2-bg4{
                        background: #509aee;
                    }
                    .at-y2-bg5{
                        background: #ee5068;
                    }
                    .at-y2-bg6{
                        background: #eeb450;
                    }
                }
            }
            .internalControlStaging-div-topRight {
                // flex: 1;
                width: 60%;
                border: 1px solid #e4e3e3;
                border-radius: 5px;
                margin: 6px;
                .internalControlStaging-daiban-title {
                    padding: 10px;
                    border-bottom: 1px solid #e4e3e3;
                    .title {
                        font-weight: 600;
                        margin-bottom: 0;
                    }
                }
                .internalControl-staging-card {
                    .ant-card-body {
                        padding: 10px;
                        text-align: center;
                    }
                }
            }
        }
        .internalControlStaging-div-bottom {
            flex: 2;
            height: 50%;
        }
    }
</style>
